import { Button, Card, Input, List, Popover, message } from "antd";
import { useEffect, useState } from "react";
import { getCollectionApi, getToken } from "./utils/client";
import s from "./common.module.less";
import classNames from "classnames";
import { MoreOutlined } from "@ant-design/icons";
import ShowIndexModal from "./components/ShowIndexModal";

export interface CollectionListProps {
    curClientId: string;
    curDatabase: string;
    onChange: (coll: string) => void;
}

function CollectionList(props: CollectionListProps) {
    const [collList, setCollist] = useState<string[]>([]);
    const [curColl, setCurColl] = useState("");
    const [showCollIndex, setShowCollIndex] = useState("");
    const [keyword, setKeyword] = useState("")

    const loadCollList = async () => {
        setCollist([]);
        setCurColl("");
        const client = getCollectionApi();
        try {
            const res = await client.collectionListPost({
                collectionListPostRequest: {
                    token: getToken(),
                    id: props.curClientId,
                    database: props.curDatabase,
                },
            });
            res.sort((a, b) => a.localeCompare(b));
            setCollist(res);
        } catch (e) {
            console.log(e);
            message.error("权限不足，无法列出数据表");
        }
    };

    useEffect(() => {
        if (props.curClientId !== "" && props.curDatabase !== "") {
            loadCollList();
        } else {
            setCollist([]);
            setCurColl("");
        }
    }, [props.curClientId, props.curDatabase]);

    useEffect(() => {
        props.onChange(curColl);
    }, [curColl]);

    return (
        <Card title="数据表列表">
            <Input placeholder="过滤数据表" allowClear value={keyword} onChange={e => {
                e.stopPropagation();
                e.preventDefault();
                setKeyword(e.target.value.trim());
            }} />
            <List bordered={false} dataSource={collList.filter(item => item.includes(keyword))}
                style={{ height: "calc(100vh - 100px)", overflowY: "auto", overflowX: "hidden" }}
                renderItem={item => (
                    <List.Item key={item} className={classNames(s.item, curColl == item ? s.active : "")} onClick={e => {
                        e.stopPropagation();
                        e.preventDefault();
                        setCurColl(item);
                    }} extra={
                        <Popover trigger="click" placement="bottom" content={
                            <div>
                                <Button type="link" onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    setShowCollIndex(item);
                                }}>查看索引</Button>
                            </div>
                        }>
                            <MoreOutlined />
                        </Popover>
                    }>
                        <div className={s.name} title={item}>{item}</div>
                    </List.Item>
                )} />
            {showCollIndex != "" && (
                <ShowIndexModal curClientId={props.curClientId} curDatabase={props.curDatabase} collection={showCollIndex}
                    onCancel={() => setShowCollIndex("")} />
            )}
        </Card>
    );
}

export default CollectionList;